<template>
  <div class="order-detail-box">
    <nav-bar class="nav-bar">
      <template v-slot:default>订单详情</template>
    </nav-bar>

    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ strStatus }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ order.order_no }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ order.created_at }}</span>
      </div>

      <van-button v-if="order.status==1" color="#ff0000" style="margin-bottom: 10px;" block @click="showPay">去支付
      </van-button>
      <van-button v-if="order.status==2" block color="#1BAEAE" @click="handlerConfirmOrder">确认订单</van-button>
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span><small>￥</small>{{ total }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>普通快递</span>
      </div>
    </div>

    <van-card v-for="item in order.orderDetails.data"
              :key="item.id"
              :num="item.num"
              :price="item.price"
              :desc="item.goods.description"
              :title="item.goods.title"
              :thumb="item.goods.cover_url"/>

    <div style="width: 100%;height: 50px;">

    </div>
    <van-popup v-model:show="isShow" closeable
               :close-on-click-overlay="false"
               position="bottom"
               style="height:40%"
               @close="close">
      <div style="width: 90%;margin: 0 auto;padding: 50px 0">
        <van-grid :border="true" :column-num="2">
          <van-grid-item text="支付宝">
            支付宝二维码
            <van-image width="150px" height="150px" :src="aliyunQR_url"/>
          </van-grid-item>
          <van-grid-item text="微信支付">
            微信二维码
            <van-image width="150px" height="150px" :src="wechatQR_url"/>
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>


  </div>
</template>

<script>
import {computed, defineComponent, onMounted, reactive, toRefs} from 'vue'
import NavBar from "../../../components/common/navbar/NavBar";
import {useRoute, useRouter} from "vue-router";
import {Dialog, Toast} from "vant";
import {confirmOrder, getOrderDetail, payOrder, payOrderStatus} from "../../../network/order";

export default defineComponent({
  name: "OrderDetail",
  components: {
    NavBar
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const entryData = reactive({
      orderId: '',
      order: {
        order_no: '',
        created_at: '',
        status: '',
        orderDetails: {
          data: []
        },
      },
      isShow: false,
      aliyunQR_url: '',// 阿里云支付二维码
      wechatQR_url: '',// 微信支付二维码
    });

    const init = () => {
      const {orderId} = route.query;
      entryData.orderId = orderId;
      getOrderDetail(orderId).then(res => {
        entryData.order = res;
      })
    }
    onMounted(() => {
      Toast.loading({message: '加载中...', forbidClick: true});
      init();
      Toast.clear();
    });
    // 计算订单显示状态
    const strStatus = computed(() => {
      let status = ['', '已下单', '已支付', '等待发货', '确认收货', '已过期'];
      return status[entryData.order.status];
    });
    // 计算价格
    const total = computed(() => {
      let sum = 0;
      entryData.order.orderDetails.data.forEach(item => {
        sum += item.price * item.num;
      });
      return sum;
    });
    // 弹出支付Pop
    const showPay = () => {
      entryData.isShow = true;
      payOrder(entryData.orderId, {type: 'aliyun'}).then(res => {
        entryData.aliyunQR_url = res.qr_code_url;
        entryData.wechatQR_url = res.qr_code_url;
      });
    }
    // 轮询支付状态
    const timer = setInterval(() => {
      payOrderStatus(entryData.orderId).then(res => {
        if (res === 2) {
          clearInterval(timer);
          router.push({path: '/orderdetail', query: {orderId: entryData.orderId}});
          entryData.isShow = false;
          console.log('clearInterval');
        }
        /*        if (!entryData.isShow) {
                  clearInterval(timer);
                  console.log('clearInterval');
                }*/
      });
    }, 2000);
    // 确认订单
    const handlerConfirmOrder = () => {
      Dialog.confirm({title: '是否确认订单?'}).then(() => {
        confirmOrder(entryData.orderId).then(res => {
          console.log(`确认订单：${res}`);
          Toast('确认成功');
          init();
        })
      })
    }
    // 关闭支付方式选择pop时触发
    const close = () => {
      console.log(`触发close`)
      entryData.isShow = false;
      init();
    }
    return {
      ...toRefs(entryData),
      strStatus,
      total,
      showPay,
      handlerConfirmOrder,
      close
    }
  }
})
</script>

<style lang="scss" scoped>
.order-detail-box {
  text-align: left;
  background: #f7f7f7;

  .order-status {
    background: #fff;
    margin-top: 44px;
    padding: 20px;
    font-size: 15px;

    .status-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {

      }
    }
  }

  .order-price {
    background: #fff;
    margin: 20px 0;
    padding: 20px;
    font-size: 15px;

    .price-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {

      }
    }
  }

  .van-card {
    margin-top: 0;
  }

  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
